var dom = {
    audio: document.querySelector('audio'),
    ul:document.querySelector('ul'),
    container:document.querySelector('.content')
}
// 解析字符串->对象数组
// {time:开始时间,words:歌词内容}
function parseLrc() {
    let lines = lrc.split("\n")
    let res = []
    lines.forEach((item, index) => {
        let obj = {
            time: null,
            text: null
        }
        let str = item.split("]")
        obj.text = str[1]
        let time = str[0].split("[")[1]
        obj.time = parseTime(time)
        res.push(obj)
    })
    return res
}
// 时间转秒
function parseTime(timeStr) {
    let part = timeStr.split(':')
    return +part[0] * 60 + +part[1]
}
// 需要高亮显示的歌词下标
function findIndex() {
    let ctime = dom.audio.currentTime
    let res = lrcData.filter(item =>item.time > ctime)
    return lrcData.length-res.length-1
}
// 创建歌词列表
function createLrcEle(){
    let frag = document.createDocumentFragment()
    lrcData.forEach(item=>{
        let li = document.createElement('li')
        li.textContent = item.text
        frag.appendChild(li) // 修改了dom树影响性能
    })
    dom.ul.append(frag)
}
// 设置偏移量
function setOffset(){
    let index = findIndex()
    let offset = liHeight *index +liHeight/2-containerHeight/2
    if (offset<0){
        offset=0
    }else if(offset>maxOffset){
        offset = maxOffset
    }
    dom.ul.style.transform = `translateY(-${offset}px)`
    
    let li = dom.ul.querySelector('.active')
    if (li) li.classList.remove('active')
    dom.ul.children[index].classList.add('active') 
}
var lrcData = parseLrc()
createLrcEle()

// 容器高度
var containerHeight = dom.container.clientHeight
// li高度
var liHeight = dom.ul.children[0].clientHeight
// 最大偏移
var maxOffset = dom.ul.clientHeight-containerHeight

// 添加事件
dom.audio.addEventListener('timeupdate',setOffset)
setOffset()